/*
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for additional
 * information regarding copyright ownership.
 *
 *
 * The Apereo Foundation licenses this file to you under the Educational
 * Community License, Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of the License
 * at:
 *
 *   http://opensource.org/licenses/ecl2.txt
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
 * License for the specific language governing permissions and limitations under
 * the License.
 *
 */


// Alert Styles

// Mixin
@mixin alert-variant($background, $border, $text-color) {

    background: $background;
    border: 1px solid $border;

    p {
        color: $text-color;
    }

    a {
        color: lighten($text-color, 10%);

        &:hover {
            color: $text-color;
        }
    }
}

// Alerts

// New notifications

.notifications-top-right {
    top: 15px;
    right: 15px;
    .alert {
         float:right;
    }
}

.notifications-top-left {
    top: 15px;
    left: 15px;
    .alert {
         float:left;
    }
}

.notifications-top-center {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.notifications-bottom-right {
    display: flex;
    flex-direction: column-reverse;
    bottom: 15px;
    right: 15px;
    .alert {
         float:right;
    }
}

.notifications-bottom-left {
    display: flex;
    flex-direction: column-reverse;
    bottom: 15px;
    left: 15px;
    .alert {
         float:left;
    }
}

.notifications-bottom-center {
    display: flex;
    flex-direction: column-reverse;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.global-notifications {
    position: fixed;
    max-width: 300px;
    z-index: $max-z;

    .alert {
        .close {
            position: unset;
            float: right;
            font-size: unset;
        }
        &.sticky {
            margin: 5px 0 10px;
        }
        p {
            display: block;
        }
    }

    .alert:hover {
      filter: brightness(105%);
    }
}

.alert {
    min-height: 40px;
    border-radius: $main-border-radius;
    position: absolute;
    top: 20px;
    left: 0px;
    right: 20px;
    z-index: $max-z;
    font-weight: 600;
    padding: 0 15px;
    overflow: hidden;

    &.sticky {
        margin: 10px 0 20px;
        position: relative;
        top: auto;
    }

    a {
        text-decoration: underline;
    }

    .close {
        position: absolute;
        right: 10px;
        font-size: 20px;
        margin-top: 9px;
        @include transition($alert-transition);
        text-decoration: none;
    }

    p {
        color: #fff;
        margin: 12px 0;
        line-height: 16px;
    }

    // Alert Colors
    // Color variables are located in assets/less/base/_variables.less

    &.info {
        @include alert-variant($state-info-bg, $state-info-border, $state-info-text);
    }

    &.warning {
        @include alert-variant($state-warning-bg, $state-warning-border, $state-warning-text);
    }

    &.success {
        @include alert-variant($state-success-bg, $state-success-border, $state-success-text);
    }

    &.danger {
        @include alert-variant($state-danger-bg, $state-danger-border, $state-danger-text);
    }
}

.modal .alert.sticky {
    margin: 0 0 20px;
}
